<template>
    <div>
        <div>
            <el-button @click="addParentMenu" type="primary">添加父菜单</el-button>
        </div>
        <el-table :data="ParentData" stripe style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-table :data="scope.row.children" border style="width: 100%">
                        <el-table-column prop="menuName" label="菜单名称"></el-table-column>
                        <el-table-column prop="icon" label="图标"></el-table-column>
                        <el-table-column prop="lastTime" label="最后修改时间"></el-table-column>
                        <el-table-column fixed="right" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="EditMenus(scope.row)" type="info" size="small">修改</el-button>
                                <el-button @click="remove(scope.row)" type="danger" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column prop="menuName" label="菜单名称"></el-table-column>
            <el-table-column prop="icon" label="图标"></el-table-column>
            <el-table-column prop="lastTime" label="最后修改时间"></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click="addChildMenu(scope.row)" type="primary" size="small">添加子菜单</el-button>
                    <el-button @click="EditMenus(scope.row)" type="primary" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加菜单 -->
        <div>
            <el-dialog width="500px" title="添加菜单" :visible.sync="dialogFormVisible">
                <el-form label-width="80px">
                    <el-form-item label="菜单名称">
                        <el-input v-model="from.menuName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="from.url" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="图标">
                        <el-input v-model="from.icon" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="submitMenus" type="primary">提交</el-button>
                        <el-button type="info">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <!-- 修改菜单 -->
        <div>
            <el-dialog width="500px" title="添加菜单" :visible.sync="editdialogFormVisible">
                <el-form label-width="80px">
                    <el-form-item label="菜单名称">
                        <el-input v-model="from.menuName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item v-if="selectFormVisible" label="父菜单">
                        <el-select  v-model="from.parentID" placeholder="请选择">
                            <el-option v-for="item in ParentData" :key="item.menuID" :label="item.menuName"
                                :value="item.menuID">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="from.url" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="图标">
                        <el-input v-model="from.icon" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="EditsubmitMenus" type="primary">提交</el-button>
                        <el-button type="info">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ParentData: [],
            dialogFormVisible: false,
            editdialogFormVisible: false,
            selectFormVisible:true,
            from: {
                menuID: '',
                menuName: '',
                lastTime: '',
                icon: '',
                url: '',
                parentID: 0    // 初始化为0
            }
        };
    },
    methods: {
        GetMenus() {
            this.axios({
                method: "get",
                url: "menus/shows"
            })
                .then(res => {
                    const menuData = res.data;
                    const parentData = menuData.filter(x => x.parentID === 0);
                    parentData.forEach(parent => {
                        parent.children = menuData.filter(child => child.parentID === parent.menuID);
                    });
                    this.ParentData = parentData;
                })
                .catch(err => {
                    console.error("请求失败:", err);
                    alert("请求失败!!!");
                });
        },
        remove(row) {
            this.$confirm("确定要删除此菜单吗?", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.axios({
                    method: "DELETE",
                    url: "menus/" + row.menuID
                }).then(res => {
                    if (res.data.code == 1) {
                        this.$notify({
                            title: '删除成功!',
                            message: '这是一条成功的提示消息',
                            type: 'success'
                        });
                        this.GetMenus();//刷新页面
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        submitMenus() {
            console.log(this.from);
            this.axios({
                method: "post",
                url: "Menus",
                data: JSON.stringify(this.from),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => {
                console.log(res)
                if (res.data.code == 1) {
                    this.$notify({
                        title: '添加成功!',
                        message: '这是一条成功的提示消息',
                        type: 'success'
                    });
                    this.dialogFormVisible = false;//关闭窗口
                    this.GetMenus();//刷新页面
                }
            })
        },
        // 点击添加子菜单
        addChildMenu(row) {
            this.from.parentID = row.menuID;
            this.dialogFormVisible = true;
        },
        // 点击添加父菜单
        addParentMenu() {
            this.from.parentID = 0; // 设置 parentID 为 0
            this.dialogFormVisible = true;
        },
        //修改
        EditMenus(row) {
            this.editdialogFormVisible = true;
            this.from = row;
            if(row.children==undefined){
                this.selectFormVisible=true;
            }else{
                this.selectFormVisible=false;
            }
        },
        EditsubmitMenus() {

            this.axios({
                method: "put",
                url: "Menus",
                data: JSON.stringify(this.from),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(res => {
                if (res.data.code == 1) {
                    this.$notify({
                        title: res.data.msg,
                        message: '这是一条成功的提示消息',
                        type: 'success'
                    });
                    this.editdialogFormVisible = false;//关闭弹窗
                    this.GetMenus();//刷新页面
                }
            })
        }
    },
    created() {
        this.GetMenus();
    }
};
</script>
